<template>
  <div class="game">
    <h2>游戏列表</h2>
    <!-- 将游戏数据传递给父组件，:父组件形参="数据", 那边会封装成为一个对象 -->
    <slot :youxi="games"></slot>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";

let games = reactive([
  {id: "01", name: "英雄联盟"},
  {id: "02", name: "王者荣耀"},
  {id: "03", name: "红色警戒"}
])
</script>

<style scoped>
.game {
  width: 200px;
  height: 300px;
  background-color: skyblue;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  margin: 30px;
}
</style>
